import { Node } from "@tiptap/core";

const FileNode = Node.create({
  name: "file",

  group: "block",
  selectable: true,
  atom: true,

  addAttributes() {
    return {
      src: {
        default: null,
        parseHTML: (element) => element.getAttribute("src"),
      },
      fileid: {
        default: null,
        parseHTML: (element) => element.getAttribute("fileid"),
      },
      text: {
        default: null,
        parseHTML: (element) => element.getAttribute("text"),
      },
    };
  },

  parseHTML() {
    return [
      {
        tag: "div.skc-file", // 匹配 class="skc-file" 的 div
        getAttrs: (node) => {
          if (node && node.nodeType === 1 && node.tagName === "DIV") {
            const fileid = node.getAttribute("fileid"); // 获取 fileid 属性
            const imgElement = node.querySelector("img"); // 获取内部的 img 标签
            const src = imgElement?.getAttribute("src"); // 获取 img 的 src 属性
            const fileNameElement = node.querySelector("div"); // 获取内部的 div（文件名）
            const text = fileNameElement?.textContent?.trim(); // 获取文件名文本

            if (fileid && src && text) {
              return {
                src,
                fileid,
                text,
              };
            }
          }
          return false;
        },
      },
    ];
  },

  renderHTML({ HTMLAttributes }) {
    const { src, text, fileid } = HTMLAttributes;

    return [
      "div",
      {
        class: "skc-file", // 自定义类名
        style: "text-align: center;", // 确保整个容器居中对齐
        fileid: fileid,
      },
      ["img", { src }],
      [
        "div",
        { style: "text-align: center;" }, // 确保文本居中显示
        text,
      ],
    ];
  },
});

export default FileNode;
